<template>
	<view class="record-container">
		<!-- 积分卡统计 -->
		<view class="cards-summary">
			<view class="summary-item">
				<text class="summary-value">{{ userExtInfo.in_points }}</text>
				<text class="summary-label">累计获得</text>
			</view>
			<view class="summary-item">
				<text class="summary-value">{{ userExtInfo.out_points }}</text>
				<text class="summary-label">已使用</text>
			</view>
			<view class="summary-item">
				<text class="summary-value">{{ userExtInfo.sy_points }}</text>
				<text class="summary-label">当前拥有</text>
			</view>
		</view>

		<!-- 记录类型筛选 -->
		<view class="filter-tabs">
			<view class="filter-item" :class="{ active: activeIndex === item.key }" v-for="(item, index) in filterTabs"
				:key="index" @click="switchFilter(item.key)">
				<text class="filter-text">{{ item.name }}</text>
			</view>
		</view>

		<!-- 积分卡记录列表 -->
		<view class="records-list">
			<view class="record-item" v-for="(item, index) in cardsRecords" :key="index">
				<view class="record-left">
					<view class="record-icon" :class="item.type">
						<text class="icon-text">{{ item.icon }}</text>
					</view>
					<view class="record-info">
						<text class="record-title">{{ item.event_data }}</text>
						<text class="record-time">{{ item.event_time }}</text>
					</view>
				</view>
				<view class="record-right">
					<view class="card-info">
						<text class="record-action" :class="item.type">
							{{ item.event_type === 1 ? '+' : '-' }}
						</text>
						<view class="card-level" :class="item.scorecard">
							<text class="level-text">{{ item.scorecard }}</text>
						</view>
						<text class="card-count">{{ item.change_points }}张</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="cardsRecords.length === 0">
			<text class="empty-text">暂无积分卡记录</text>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				filterTabs: [{
						key: 0,
						name: '全部'
					},
					{
						key: 1,
						name: '获得'
					},
					{
						key: 2,
						name: '使用'
					}
				],
				// 用户扩展信息（非登录相关）
				userExtInfo: {
					sy_points: 0,
					in_points: 0,
					out_points: 0,
					cardsList: []
				},
				point_type: 2, // 类型：1-积分 2-积分卡
				activeIndex: 0, // 当前选中的分类
				searchKeyword: '',
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				cardsRecords: []
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'dealerInfo'])
		},
		onLoad(options) {
			if (options.point_type) {
				this.point_type = options.point_type
			}
			this.onSearch()
		},
		onShow() {
			this.loadPointInfo();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.cardsRecords = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			// 切换筛选条件
			switchFilter(key) {
				this.activeIndex = key
				this.onSearch()
			},

			loadPointInfo() {
				// 加载用户积分信息
				this.$api.user.GetUserExtInfo2().then(res => {
					if (res.data && res.data.cardsList) {
						this.userExtInfo.cardsList = res.data.cardsList
						this.userExtInfo.sy_points = res.data.cardsList.reduce((accumulator, currentValue) => {
							return accumulator + currentValue.sy_points;
						}, 0);
						this.userExtInfo.in_points = res.data.cardsList.reduce((accumulator, currentValue) => {
							return accumulator + currentValue.in_points;
						}, 0);
						this.userExtInfo.out_points = res.data.cardsList.reduce((accumulator, currentValue) => {
							return accumulator + currentValue.out_points;
						}, 0);
					}
				})
			},

			// 搜索事件处理
			onSearch(searchQuery) {
				this.searchKeyword = searchQuery
				this.page = 1
				this.recordCount = 0
				this.cardsRecords = []
				this.loadDataList()
			},

			// 查询积分记录
			loadDataList() {
				if (this.hasSearched) {
					return false
				}

				this.hasSearched = true
				this.$api.point.GetPointOrderList({
					page: this.page,
					limit: this.limit,
					event_type: this.activeIndex,
					point_type: this.point_type,
					keyword: this.searchKeyword
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					res.data.forEach(item => {
						// 事件类型：1-收入 2-支出
						if (item.event_type === 1) {
							item.type = 'earn'
							item.icon = '🎁'
						} else {
							item.type = 'use'
							item.icon = '🎫'
						}
					})
					this.cardsRecords = this.cardsRecords.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding-bottom: 160rpx;
	}

	/* 积分卡统计 */
	.cards-summary {
		background-color: white;
		display: flex;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.summary-item {
		flex: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.summary-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #52a58a;
		margin-bottom: 8rpx;
	}

	.summary-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 筛选标签 */
	.filter-tabs {
		background-color: white;
		display: flex;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 20rpx;
	}

	.filter-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		position: relative;
	}

	.filter-item.active .filter-text {
		color: #52a58a;
		font-weight: bold;
	}

	.filter-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #52a58a;
		border-radius: 2rpx;
	}

	.filter-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 记录列表 */
	.records-list {
		background-color: white;
		margin: 0 30rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.record-item:last-child {
		border-bottom: none;
	}

	.record-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.record-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.record-icon.obtain {
		background-color: #e8f5e8;
	}

	.record-icon.use {
		background-color: #fff2e8;
	}

	.icon-text {
		font-size: 32rpx;
	}

	.record-info {
		flex: 1;
	}

	.record-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.record-time {
		font-size: 24rpx;
		color: #999;
	}

	.record-right {
		text-align: right;
	}

	.card-info {
		display: flex;
		align-items: center;
	}

	.record-action {
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 8rpx;
	}

	.record-action.obtain {
		color: #52a58a;
	}

	.record-action.use {
		color: #ff6b35;
	}

	.card-level {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8rpx;
	}

	.card-level.S {
		background-color: #ff6b35;
	}

	.card-level.A {
		background-color: #52a58a;
	}

	.card-level.B {
		background-color: #3498db;
	}

	.card-level.C {
		background-color: #9b59b6;
	}

	.card-level.D {
		background-color: #95a5a6;
	}

	.level-text {
		font-size: 20rpx;
		font-weight: bold;
		color: white;
	}

	.card-count {
		font-size: 24rpx;
		color: #333;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 100rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>